﻿<!-->本文件是测试用的， 引用的jS 是 网上的，因为  这跟 整个项目是没关联的，只是为了便于调整布局<-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <style type="text/css">
        body{
            background-color:currentColor;
        }

        td {
            height:25%;
            width: 100px;
            border: red;
            border-width: 2px;
            border-style: solid;
        }
        html, body,table {
                width: 99.5%;
                height: 99.5%;
        }
        table {
            table-layout: fixed;
        }

        body{
            background-image : url("bg1.png");

        }

        .c1, .c2, c3{
            width: 100%;
            position: absolute;
        }


    </style>
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <table style="width: 100%; table-layout:fixed">
        <tr>
            <td colspan="6" style="height:1px; font-size:15px; color:aliceblue">标题栏</td>
        </tr>
        <tr>
            <td  colspan="2">
                <div id="c1" style="height:100%" >

                </div>
            </td>
            <td  colspan="2">
                <div id="c2">

                </div>
            </td>
            <td  colspan="2">
                <div id="c3">

                </div>

            </td>
        </tr>
        <tr>
            <td id="d1">&nbsp;1</td>
            <td>&nbsp;2</td>
            <td>&nbsp;3</td>
            <td>&nbsp;4</td>
            <td>&nbsp;5</td>
            <td>&nbsp;6</td>
        </tr>
        <tr>
            <td id="d2">&nbsp;1</td>
            <td>&nbsp;2</td>
            <td>&nbsp;3</td>
            <td>&nbsp;4</td>
            <td>&nbsp;5</td>
            <td>&nbsp;6</td>
        </tr>
        <tr>
            <td id="d3">&nbsp;1</td>
            <td>&nbsp;2</td>
            <td>&nbsp;3</td>
            <td>&nbsp;4</td>
            <td>&nbsp;5</td>
            <td>&nbsp;6</td>
        </tr>
    </table>
      <script type="text/javascript" >

          setTimeout(getChartData, 500);
          function getChartData() {
              var dc1 = document.getElementById("c1");
              var dc2 = document.getElementById("c2");
              var dc3 = document.getElementById("c3");
              var dc4 = document.getElementById("d1");
              var dc5 = document.getElementById("d2");
              var dc6 = document.getElementById("d3");

              var Chart1 = echarts.init(dc1);
              var Chart2 = echarts.init(dc2);
              var Chart3 = echarts.init(dc3);
              var Chart4 = echarts.init(dc4);
              var Chart5 = echarts.init(dc5);
              var Chart6 = echarts.init(dc6);
              var CsumOpt =
              {
                  color: ['lightgreen', 'lightgray', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                  title: {
                      text: '总开动率',
                      left: 'center',
                      top: '1%',
                      textStyle: {
                          //文字颜色
                          color: 'lightgreen',
                          //字体风格,'normal','italic','oblique'
                          fontStyle: 'normal',
                          //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                          fontWeight: 'bold',
                          //字体系列
                          fontFamily: 'sans-serif',
                          //字体大小
                          fontSize: 10
                      }
                  },
                  tooltip: {
                      trigger: 'item'
                      //formatter: '{a} <br/>{b}: {d}%'
                  },
                  graphic: [{ //环形图中间添加文字
                      type: 'text', //通过不同top值可以设置上下显示
                      left: 'center',
                      top: '43%',
                      style: {
                          text: '天竺',
                          textAlign: 'center',
                          fill: 'lightgreen', //文字的颜色
                          width: 30,
                          height: 20,
                          fontSize: 10,
                          fontFamily: "Microsoft YaHei"
                      }
                  },
                  { //底部细节栏
                      type: 'text', //通过不同top值可以设置上下显示
                      left: 'center',
                      top: '87%',
                      style: {
                          text: "总锭数: 12312"
                          ,
                          textAlign: 'center',
                          fill: '#ddd', //文字的颜色
                          width: 20,
                          height: 20,
                          fontSize: 10,
                          fontFamily: "Microsoft YaHei"
                      }
                  }
                  ]
                  ,
                  series: [
                      {
                          animation: true,
                          name: '总开动率',
                          type: 'pie',
                          radius: ['45%', '75%'],
                          center: ['50%', '47%'],
                          avoidLabelOverlap: false,
                          label: {
                              show: false,
                              position: 'center',
                              fontSize: '20',
                              fontWeight: 'bold'
                          },
                          labelLine: {
                              show: false
                          },
                          data: [{ name: '天竺', value: 234 }]
                          ,

                          animationDuration: 700,
                          animationDelay: function (idx) {
                              return 100;
                          },
                          animationDurationUpdate: function (idx) {
                              // 越往后的数据时长越大
                              return 100;
                          },
                          animationDelayUpdate: function (idx) {
                              // 越往后的数据延迟越大
                              return 100;
                          }
                      }
                  ]
              };
              Chart1.setOption(CsumOpt);
              Chart2.setOption(CsumOpt);
              Chart3.setOption(CsumOpt);
              Chart4.setOption(CsumOpt);
              Chart5.setOption(CsumOpt);
              Chart6.setOption(CsumOpt);
          }

      </script>
</body>
</html>